<template>
	<div>
	  <div class="border card-item cursor-pointer">
		<img :src="course.themeImage" alt="" srcset="" class="w-[100%]"   @click="toDetail(course.id)"/>
		<div class="m-4">
		  <h1 class="font-bold" @click="toDetail(course.id)">{{course.courseName}}</h1>
		  <div class="dl-row-sb" style="position: relative;margin-top: 5px">
			<span class="text-gray-400 text-sm">上线时间&nbsp;:&nbsp;{{course.create_time | formateDate}}</span>
			<span v-if="collect">
				<i v-if="course.collectNum==0" @click="collectionCourse()"  class="el-icon-star-off up-star"  style="bottom: 0px;"></i>
				<i v-if="course.collectNum>0" @click="cancelCollection()" class="el-icon-star-on down-star"  style="bottom: 0px;" ></i>
			</span>
		  </div>
		</div>
		<!-- <div class="user-number">
		  <i class="el-icon-user-solid"></i>
		  <span>&nbsp;{{course.studyNum}}</span>
		</div> -->
	  </div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex';
	import {formateDate} from '@/utils/index'
	import { createCollect, cancelCollect } from '@/api/collect'
	export default {
		props:{
		  "course":
			{
			  type:Object,
			  default:null,
			},
			"collect":
				{
				  type:Boolean,
				  default:false,
				}
		},
		data() {
		  return {

		  }
		},
		computed: {
		  ...mapGetters(['user']),
		},
		filters: {
		  formateDate (time) {
		    let date = new Date(time)
		    return formateDate(date, 'yyyy-MM-dd hh:mm:ss')
		  }
		},
		methods: {
			collectionCourse() {//课程收藏
			    const data = {
			        busId: this.course.id,
			        name: this.course.courseName,
			        type: 1
			    }
			    createCollect(data).then(res => {
					if(res!="" && res!=null){
						this.course.collectId = res.id;
						this.course.collectNum=1
						this.$message.success(`收藏课程成功！`)
					}else{
						this.$message.error(`收藏课程失败！`)
					}
			        
			    })
			},
			cancelCollection() {//取消收藏
			alert(this.course.collectId)
				this.$confirm('此操作将取消课程收藏, 是否继续?', '提示', {
				   confirmButtonText: '确定',
				   cancelButtonText: '取消',
				   type: 'warning'
				}).then(() => {
					cancelCollect(this.course.collectId).then(res => {
					    this.$message.error(`已取消收藏！`)
						this.course.collectNum=0
					})
				}).catch(() => {
					this.$message({
						type: 'error',
						message: '已取消删除'
					});          
				});
			},
			getImage2(obj){
				var array=eval('(' + obj.themeImage + ')');
				var imageUrl="";
				if(Object.prototype.toString.call(array)==='[object Array]'){
					imageUrl=array[0].url;
				}
				return imageUrl;
			},
			toDetail(id) {

			  this.$router.push({path:'/course/detail',
			  query:{
			  	"courseId":id
			  }
			  })
			  //定义一个路径
			  // const href = this.$router.resolve({
			  // 	path: '/course/detail',
			  // 	query: { "courseId":id },
			  // }).href;
			  //   //打开新的页面 到 href 这个页面
			  // 	window.open(href, "_blank");
			}
	   },
	}
</script>

<style lang="scss" scoped>
.card-item {
  position: relative;
  height: 266px;
  width: 250px;
  background: #FFFFFF;
  box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.05);
  border-radius: 15px 15px 15px 15px;
  border: none;
  overflow: hidden;
  margin-right: 30px;
  margin-bottom: 30px;
  h1{
    font-size: 16px;
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  span{
    font-size: 12px;
    color: #999999;
  }
  img{
    height: 180px;
  }

  .user-number {
    @apply flex items-center text-gray-400 text-sm;
    position: absolute;
    right: 5%;
    top: 5%;
    width: auto;
    padding: 0 10px;
    height: 24px;
    border-radius: 12px;
    background-color: rgba(0,0,0,0.3);

    i,span{
      color:#ffffff
    }
  }
  .up-star{
    font-size: 18px;
    color: #999;
    position: absolute;
    right: 0px;
    bottom: -10px;
  }
  .up-star:hover{
    color: #0068B6;
  }
  .down-star{
    font-size: 22px;
    color: #0068B6;
    position: absolute;
    right: 0px;
    bottom: -10px;
  }
}
.card-item:hover{
  box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2);
  h1{
    color: #0068B6;
    font-weight: bold;
  }
}
</style>